import React, { Component } from 'react'
import { Modal,Input, message} from 'antd'

import axios from 'axios'

export default class Add extends Component {
    state={
        "classifyName": "",
    }
    getVal=(e)=>{
            this.setState({
                [e.target.name]:e.target.value
            })
    }
    // 分类的添加回车事件
    handleKeyUp =(event)=>{
        // console.log("@")
    // 结构赋值获取keyCode,target
    const {keyCode,target} = event
    // 判断keyCode是否是回车
    if(keyCode !== 13) return
    // 执行add方法
    this.add()
    // // 清空内容
    target.value = ""
    }
    // 分类添加调用的方法
    add=()=>{
            axios.post("/api/payment/classify/save",{
                "classifyName": this.state.classifyName,
            }).then(res=>{
                if(res.data.code===200){
                    message.success(res.data.msg,1,()=>{
                        this.closeAdd()
                    })
                }else{
                    message.error(res.data.msg)
                }
            })
    }
    closeAdd=()=>{
        this.setState({
            "classifyName": "",
        })
        this.props.closeAdd()
    }
  render() {
    return (
      <div>
          <Modal title="添加新分类" visible={this.props.addVisible} okText={"确定"} cancelText={"取消"} onCancel={this.closeAdd} onOk={this.add}>
              <Input style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} type="text" value={this.state.classifyName} placeholder="请输入需要添加的分类名" name="classifyName" onChange={this.getVal} onKeyUp={this.handleKeyUp}/>
          </Modal>
      </div>
    )
  }
}
